<!doctype html>
<html class="no-js" lang="">

<head>
    <!-- meta -->
    <meta charset="utf-8">
    <meta name="description" content="Flat, Clean, Responsive, admin template built with bootstrap 3">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <!-- /meta -->

    <title>心秘籍系统</title>



    <!-- core styles -->
    <link rel="stylesheet" href="__ROOT__/Public/asset/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__ROOT__/Public/asset/css/font-awesome.min.css">
    <link rel="stylesheet" href="__ROOT__/Public/asset/css/animate.min.css">
    <!-- /core styles -->

    <!-- template styles -->
    <link rel="stylesheet" href="__ROOT__/Public/asset/css/style.1.css" id="font">

    <!-- template styles -->
    <link rel="stylesheet" href="__PUBLIC__/asset/css/view/MyQuiz/show_16pf.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="__ROOT__/Public/asset/vendor/modernizr.js"></script>
</head>

<!-- body -->
<body>

<div class="container">
    <a href="/Home/MyQuiz/MyReport" ><h4>返回报告列表</h4></a>
    <header class="col-md-8 col-md-offset-2">
        <div class="title">
            <h2 align="center"><b>pf16人格分析报告</b></h2>
            <br><br><br>
            <h4 align="center" style="font-family: 微软雅黑;">原著：[美]雷蒙德·卡特尔</h4>
        </div>
    </header>
    <div class="col-md-10 col-md-offset-1"><hr/></div>
    <div class="col-md-6 col-md-offset-3"><p align="center">受测者：{$userinfo.nickname}&nbsp&nbsp&nbsp完成问卷时间：2016-7-15</p></div>
    <div class="col-md-10 col-md-offset-1 menu">
        <table width="100%">
            <tbody>
            <tr><td class="line"><div class="l b">pf16 测试结果</div> <div class="r">8</div></td></tr>
            <tr><td class="line"><div class="l b">11种核心特质标准分
                示意图
            </div> <div class="r">5</div></td></tr>

            <tr><td class="line"><div class="l b">后记</div> <div class="r">9</div></td></tr>

            </tbody>
        </table>
    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="main-header">测验背景介绍</div>

        <article>
            人格是稳定的、习惯化的思维方式和行为风格，它贯穿于人的整个心理，是人的独特性的整体写照。了解自己的人格类型及特点对我们的生活和工作都有着非常有利的作用，有助于我们良好人际关系的建立、未来工作的合理开展和顺利发展。更好地了解自己才能更好地发挥自己的潜能来发展自己，实现自我。本测验从乐群性、敏感性、稳定性、活泼性等方面对人进行了描绘，帮助受测者了解自己的性格类型及特点。
        </article>
    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="main-header">该受测者的整体情况</div>

        <div id="chart"></div>
    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="main-header">该受测者具体得分与解释</div>

        <article>
            <foreach name="pf16_data" item="pf16">
                <div class="report-section">
                    <div>
                        <div class="section_score" style="display: none;"><span>{$pf16.section}</span><span>{$pf16.value}</span></div>
                        <b><span>{$pf16.section}</span>{$pf16.property}</b>{$pf16.suscribe}该受测者在这个维度上的得分是：<b><span>[{$pf16.value}]</span></b>
                    </div>
                    <div>
                        <b>测评结果解释：</b>
                        <ul>
                            <li>{$pf16.suscribe_low}</li>
                            <li>{$pf16.suscribe_mid}</li>
                            <li>{$pf16.suscribe_high}</li>
                        </ul>
                    </div>
                </div>
            </foreach>
        </article>

    </div>
</div>

</body>
<script src="__ROOT__/Public/asset/vendor/jquery-1.11.1.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="__ROOT__/Public/asset/bootstrap/js/bootstrap.js"></script>
<script>

    $(document).ready(function(){

        //alert($(".section_score:eq(0)").find('span:eq(1)').html());

        var section_score = new Array();

        for (var $i = 0; $i < 16; $i++){
            section_score[$i] = parseInt($(".section_score:eq("+$i+")").find('span:eq(1)').html());
        }

        console.log(section_score);


        $('#chart').highcharts({
            chart: {
                type: 'column',
                margin: [ 50, 50, 100, 80],

            },
            title: {
                text: 'pf16人格测试情况'
            },
            xAxis: {
                categories: [
                    '乐群性',
                    '聪慧性',
                    '稳定性',
                    '特强性',
                    '活泼性',
                    '有恒性',
                    '敢为性',
                    '敏感性',
                    '警惕性',
                    '想象性',
                    '世故性',
                    '忧虑性',
                    '变革性',
                    '独立性',
                    '自律性',
                    '紧张性'
                ],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: '微软雅黑'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '转换分'
                }
            },
            legend: {
                enabled: false
            },

            series: [{
                animation: false,
                name: 'pf16转换分',
                data: section_score,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: '微软雅黑',
                        textShadow: '0 0 3px black'
                    }
                }
            }]
        });
    });




</script>


